<template>
  <div class="zpanel">
    <el-card v-if="type == 'typea'" :body-style="bodystyle" shadow="hover">
      <el-row>
        <el-col :span="12">
          <slot name="top"></slot>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <slot name="content"></slot>
        </el-col>
      </el-row>
    </el-card>
    <el-card v-if="type == 'typeb'" :body-style="bodystyle" shadow="hover">
      <el-row :gutter="40">
        <el-col :span="16">
          <el-row style="padding: 7%">
          </el-row>
          <el-row>
            <el-col :span="16">
              <slot name="top"></slot>
            </el-col>
          </el-row>
          <el-row>
            <slot name="content"></slot>
          </el-row>
        </el-col>
        <el-col :span="8">
          <slot name="right"></slot>
        </el-col>
      </el-row>
    </el-card>
    <el-card v-if="type == 'typec'" :body-style="bodystyle" shadow="hover">
      <el-row :gutter="40">
        <el-col :span="8">
          <slot name="left"></slot>
        </el-col>
        <el-col :span="16">
          <el-row class="z-flex-end">
            <el-col :span="12">
              <slot name="r-top"></slot>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <slot name="r-mid"></slot>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <slot name="r-bot"></slot>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
    <el-card v-if="type == 'typed'" :body-style="bodystyle" shadow="hover">
      <el-row class="z-flex-center">
        <el-col :span="8">
          <slot name="top"></slot>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <slot name="content"></slot>
        </el-col>
      </el-row>
    </el-card>
    <el-card v-if="type == 'typee'" :body-style="bodystyle" shadow="hover">
      <el-row :gutter="40" class="z-flex-align-center">
        <el-col :span="8">
          <slot name="left"></slot>
        </el-col>
        <el-col :span="16">
          <el-row class="z-flex-end">
            <slot name="r-top"></slot>
          </el-row>
          <el-row class="z-flex-end">
            <slot name="r-bot"></slot>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
    <el-card v-if="type == 'typef'" :body-style="bodystyle" shadow="hover">
      <el-row :gutter="40">
        <el-col :span="6" style="float: left">
          <slot name="top-l"></slot>
        </el-col>
        <el-col :span="6" style="float: right">
          <slot name="top-r"></slot>
        </el-col>
      </el-row>
      <el-row>
        <slot name="bot"></slot>
      </el-row>
    </el-card>
    <el-card v-if="type == 'typeg'" :body-style="bodystyle" shadow="hover">
      <el-row>
        <slot name="top"></slot>
      </el-row>
      <el-row class="z-flex-center">
        <el-col :span="8">
          <slot name="mid"></slot>
        </el-col>
      </el-row>
      <el-row>
        <slot name="bot"></slot>
      </el-row>
    </el-card>
    <el-card v-if="type == 'typeh'" :body-style="bodystyle" shadow="hover">
      <el-row>
        <slot name="top"></slot>
      </el-row>
      <el-row>
        <slot name="bot"></slot>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "ZPanel",
  props: {
    type: {
      type: String,
      default: 'typea'
    },
    bodystyle: {
      type: Object,
      default: () => {
        return {}
      }
    }
  }
}
</script>

<style scoped>

</style>
